<template>
  <div class="write">
    <div class="write_main">
      <div class="write_title">
        <img src="../../assets/image/dingwei.png" alt />
        <div class="title_rig">
          <div class="title_name">
            <span class="name">{{address.consignee}}</span>
            <span class="tel">{{address.mobile}}</span>
          </div>
          <span class="date">{{address.district}}{{address.address}}</span>
        </div>
      </div>
      <img class="Imgs" src="../../assets/image/bottom_shod.png" alt />
    </div>

    <div class="write_item">
        <van-collapse v-model="activeNames">
          <van-collapse-item name="1" :content="tableData">
            <template #title>
              <div class="titles" style="height:1.26rem;line-height:1.26rem; display:flex; align-items:center">
                <span style="color:#222222;font-size:14px">精品礼品信息</span>
                <van-icon name="收起" />
              </div>
            </template>
            <div class="goods_item">
              <div class="goods_items">
                <img :src="address.pictrue" alt />
                <div class="goods_center">
                  <span class="name">{{address.goodsName}}</span>
                  <div class="goods_bottom">
                    <span>
                      <img src="../../assets/image/monly.png" alt />
                      {{address.totalPoints}}
                    </span>
                    <span class="iiii">X 1</span>
                  </div>
                </div>
              </div>
            </div>
          </van-collapse-item>
        </van-collapse>
    </div>

    <div class="footers">
      <div class="jifen">
        <div class="jifen_center">
          <span class="lipin">精品礼品积分</span>
          <span class="li">
            <img src="../../assets/image/moliy.png" alt />
            <p>{{address.point}}</p>         
          </span>
        </div>
      </div>
      <div class="mmm"></div>
      <div class="footer">
        <div class="foot">
          <span class="aa">精品积分合计:{{address.totalPoints}}</span>
          <div class="ti" @click='toPayOrder()'>提交订单</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import url from "../../axios/apiUrl";
//引入api.js定义的方法index
import { postRequest } from "../../api/index";
import { getRequest } from "../../api/indexGet";
export default {
  data() {
    return {
      activeNames: ["1"],
      address: {}, //返回的所有数据
      tableData: [],
      api: JSON.parse(sessionStorage.getItem("ponitOrder")),
      btn: true,
    };
  },
  created() {
    postRequest(url.birdWriteOrder, this.api).then((res) => {
      this.address = res.data.content;
      this.tableData = res.data.content.pointGoods;
    });
  },
  methods: {
    toPayOrder() {
        var apiFunc={
            type:1,
            channel:2,
            param:{
                goodsId:this.address.goodsId,
                quantity:this.address.quantity,
                skuId:this.address.goodsId
            }
        }
        if(this.address.skuSpecList){
            apiFunc.param.skuId=this.address.skuSpecList.skuId
        }
        postRequest(url.birdPointOrder,apiFunc).then(res => {
            if (res.data.content) {
                this.$router.push("/succeChange");
            }else{
                this.$toast({
                    fail:'提交失败!',               
                });
            }
        });
    }
  },
};
</script>
<style lang="less" scoped>

.write {
  
  padding: 0;
  margin: 0;
  background: #eeeeee;
  .van-cell--clickable{
    line-height: center;
  }
  .write_main {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    background: #ffffff;
    .write_title {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 1.28rem;
      padding-left: 0.2rem;
      padding-right: 0.2rem;
      img {
        width: 0.46rem;
        height: 0.46rem;
      }
      .title_rig {
        padding: 0.26rem;
        height: 1.2rem;
        line-height: 0.6rem;
        .title_name {
          line-height: 0.68rem;
          font-size: 0.3rem;
          color: #222222;
          // line-height: 0.3rem;
          font-weight: bold;
          .name {
            //   margin-right: 0.3rem;
          }
        }
        .date {
          color: #222222;
          font-size: 0.3rem;
        }
      }
    }
     .Imgs {
    height: 0.03rem;
    width: 100%;
  }
  }
  .write_item {
    position: relative;
    top: 1.6rem;
    overflow: hidden;
    border-top: 0.6rem solid #efefef;
    .titles{
      align-items: center;
    }
    .goods_item {
      height: 2.2rem;
      .goods_items {
        display: flex;
        justify-content: center;
        padding: 0.2rem;
        border-bottom: 0.02rem solid #eeeeee;
        img {
          width: 1.6rem;
          height: 1.6rem;
        }
        .goods_center {
          width: 6.6rem;
          padding-left: 0.3rem;
          .name {
            font-size: 0.32rem;
            color: #343434;
            font-weight: bold;
          }
          .goods_bottom {
            bottom: 0;
            color: #1eb808;
            display: flex;
            justify-content: space-between;
            span {
              color: #1eb808;
              img {
                width: 0.3rem;
                height: 0.3rem;
              }
            }
            .iiii {
              color: #222222;
            }
          }
        }
      }
    }
  }

  .footers {
    height: 3rem;
    width: 100%;
    background: #efefef;
    position: fixed;
    bottom: 0;
    right: 0;
    border-top: 0.6rem solid #efefef;
    .jifen {
      width: 100%;
      height: 1rem;
      background: #ffffff;
      border-bottom: 0.6rem solid #eeeeee;
      z-index: 6666;
      border: 0.02rem solid #efefef;
      .jifen_center {
        display: flex;
        justify-content: space-between;
        line-height: 1rem;
        padding-left: 0.2rem;
        padding-right: 0.2rem;
        .lipin {
          color: #222222;
        }
        .li {
          width: 1.6rem;
          height: 1rem;
          display: flex;
          align-items: center;
          justify-content: space-around;
          img {
            width: 0.29rem;
            height: 0.29rem;
          }
        }
      }
    }
    .mmm {
      height: 1rem;
    }
    .footer {
      width: 100%;
      height: 1rem;
      display: flex;
      justify-content: flex-end;
      // justify-content: left;
      background: #ffffff;
      border: 0.02rem solid #efefef;
      align-items: center;
      .foot {
        display: flex;
        align-items: center;
        .aa {
          font-size: 0.38rem;
          color: #fe343c;
          font-weight: bold;
          margin-right: 0.3rem;
        }
        .ti {
          width: 2.4rem;
          height: 1rem;
          background: #1eb808;
          text-align: center;
          align-items: center;
          color: #ffffff;
          line-height: 1rem;
          font-size: 0.36rem;
        }
      }
    }
  }
}
</style>